<template>
	<view style="">
	<!-- 	<view class="search-view-container">
			<view class="search-view">
				<image class="search-view-icon" src="../../static/images/search@3x.png"></image>
				<input maxlength="50" class="search-view-input" placeholder="搜索" disabled="disabled" placeholder-class="placeholder" />
			</view>
		</view> -->
		<view class="people-box">

			<view class="flexr justify-between people-item" v-for="(item,index) in list" :key="index" @click="gotoPage('/packagePages/friend/msgDetail',item,index)">
				<view class="people-img">
					<image :src="item.avatar" mode=""></image>
					
				</view>
				<view class="flex-1 people-mi">
					<view class="people-name">{{item.username}}</view>
					<view class="people-desc  elone" >{{getContent(item.content)}}</view>
				</view>
				<view class="flexc align-end">
					<view class="people-line">{{item.createTime|filterTime}}</view>
					<view class="no-red" v-if="item.unReadCount>0">{{item.unReadCount>99?'99+':item.unReadCount}}</view>
					<view class="no-red" style="background-color: rgba(0,0,0,0);" v-else></view>
				</view>
			</view>
		</view>
		<empty v-if="list.length<=0"></empty>
	</view>
</template>

<script>
	import { isLogin, toLogin, null2str, errorToShow,getmyDate,getDayName } from '@/config/common.js';
	import {
		queryChatList,getImFriend
	} from "@/constant/friend.js"
	import list from "./components/list.vue"
	import popContent from "./components/popContent.vue"
	let timer=null
	import {
		socket
	} from "@/config/socket.js"
	export default {
		components: {
			list,
			popContent
		},
			mixins: [socket],
		data() {
			return {
				params: {
					"nickName": "",
					"education": "",
					"hobbyus": null,
					"gender": null,
					"nowStoreId": null,
					"isPublic": null,
					pageNum:1,
					pageSize:10
					
				},
				list:[],
				customerId:null
			}
		},
		filters:{
			filterTime(e){
				
				if(getDayName(e)==1){
					
					// 假如是今天
					return getmyDate(e)
				}else{
					return getmyDate(e,1)
				}
			}
		},
		onLoad(){
		
			// this.clearTimer()
			// timer=setInterval(()=>{
			// 	this.getFriend();
			// },3000)
		},
		onShow() {
			this.customerId=uni.getStorageSync('customerId')
				if (!isLogin()) {
					toLogin();
				}
				this.getFriend();
		},
		onUnload() {
			console.log('onUnload')
			this.clearTimer()
		},
		onHide() {
			console.log('onHide')
			this.clearTimer()
			
			console.log(timer)
		},
		beforeDestroy() {
			console.log('beforeDestroy')
			this.clearTimer()
			
			
		},
		
		onPullDownRefresh() {
			this.getFriend();
		},
		methods: {
			getContent(e){
				let str=''
				if(e&&e.indexOf('<img')>=0){
					str="[图片]"
				}else{
					str=e
				}
				return str
			},
			clearTimer(){
				clearInterval(timer)
				timer=null
			},
			
			getFriend() {
				getImFriend().then(res => {
					let data = res.data
					console.log(data,'data')
					this.list = data;
				})
			},
			onMessageHandle(obj) {
				let myId = uni.getStorageSync('customerId')
				obj.content=this.parseMessage(obj.content)
				
				// 
				let index=this.list.findIndex(item=>item.friendId==obj.fromId||item.friendId==obj.toId)
			
				if(index){
						// 假如列表有就更新数据
					let item=this.list[index]
					item.content=obj.content
					if(item.unReadCount&&item.unReadCount>0){
						item.unReadCount=item.unReadCount+1
					}else{
						item.unReadCount=1
					}
					this.list.splice(index,1,item)
				}else{
					// 没有就新增数据
					this.list.push({...obj,unReadCount:1})
				}
				
				if (obj.fromId == this.params.friendId && obj.toId == myId) {
					this.chatList.push({
						...obj,
						who: 1,
					})
				} else if (obj.toId == this.params.friendId && obj.fromId == myId) {
					this.chatList.push({
						...obj,
						who: 2
					})
				}
				// console.log(this.chatList,'this.chatList')
				// this.scrollTop = this.old.scrollTop;
				// this.$nextTick(function() {
				// 	this.scrollTop = 9999;
				// });
			},
			gotoPage(url,item,index){
			item.unReadCount=0
			this.list.splice(index,1,item)
				let info= uni.getStorageSync('customerInfo')
				
				let senderNickName=info.nickName
				uni.navigateTo({
					url:url+'?friendId='+item.friendId+'&receiverNickName='+item.username+'&senderId='+item.userId+'&senderNickName='+senderNickName
				})
			}

		}
	}
</script>
<style>
	@import url('../../css/common.css');
</style>
<style lang="scss">
	.search-view-container {
		background-color: #fff;
		height: 76rpx;
		width: 100%;
		display: flex;
		align-items: center;

		.more-btn {
			width: 30rpx;
			height: 30rpx;
			margin-left: auto;
			margin-right: 20rpx;
		}

		.search-view {
			display: flex;
			align-items: center;
			background-color: #f5f6fd;
			height: 60rpx;
			border-radius: 30rpx;
			margin-left: 30rpx;
			width: 100%;
			margin-right: 30rpx;

			&-icon {
				width: 28rpx;
				height: 28rpx;
				margin-left: 30rpx;
				margin-right: 10rpx;
			}

			&-input {
				font-size: $main-text-size-28;
				width: 80%;

				.placeholder {
					font-size: $main-text-size-28;
					font-family: 'SourceHanSansCN-Regular';
					color: $main-text-color-grey;
				}
			}
		}
	}

	.people-item {
		padding: 20rpx 0;
		// border-bottom: 1px solid #eee;
		.people-mi {
			max-width: calc(100% - 240rpx);
			margin-right: 20rpx;
		}
		.no-red{
			margin-top: 6rpx;
			min-width: 30rpx;
			padding:0 15rpx;
			height: 40rpx;
			border-radius: 90px;
			background-color: red;
			color: #fff;
			text-align: center;
			line-height: 40rpx;
			font-size: 12px;
			box-sizing: border-box;
		}

		.people-img {
			width: 116rpx;
			height: 116rpx;
			border-radius: 50%;
			// overflow: hidden;
			margin-right: 20rpx;
			position: relative;
			

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.people-name {
			color: #333;
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			font-weight: bold;
		}

		.people-sex {

			margin-left: 30rpx;
			padding: 0 20rpx;
			height: 40rpx;
			border-radius: 21px;
			background: #FD83C8;
			color: #FFF;
			text-align: center;
			font-family: PingFang SC;
			font-size: 14px;
			font-style: normal;
			font-weight: 400;
			line-height: 40rpx;

			image {
				margin-right: 10rpx;
				width: 28rpx;
				height: 28rpx;
			}

		}

		.people-desc {
			color: #979797;
			font-family: PingFang SC;
			font-size: 12px;
			font-style: normal;
			font-weight: 400;
			margin-top: 20rpx;
			width: 100%
		}
	}

	.people-line {
		color: #666;
		text-align: center;
		font-family: PingFang SC;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 40rpx;
		position: relative;
		// padding: 0 0rpx 0 30rpx;

		// &:before {
		// 	content: '';
		// 	position: absolute;
		// 	top: 50%;
		// 	left: 0;
		// 	margin-top: -3px;
		// 	width: 6px;
		// 	height: 6px;
		// 	border-radius: 50%;
		// 	background-color: #84E44B;
		// 	;
		// }
	}

	.people-want {
		min-width: 52rpx;
		height: 44rpx;
		border-radius: 20rpx;
		// background-color: #282828;
		color: #FFF;
		text-align: center;
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: 400;
		line-height: 44rpx;
		padding: 0 10rpx;
		// margin-top: 20rpx;
	}

	.people-box {
		padding: 20rpx 32rpx;
	}
	.listBox{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.list-item{
		width: 49%;
		margin-bottom: 20rpx;
		
	}
	.list-item:nth-child(2n-1){
		margin-right: 2%;
	}
</style>